.wrap {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);

  .content {
    width: 300px;
    height: 412px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 206px);

    .desk {
      width: 100%;
      height: 72px;
      position: relative;
      margin-bottom: 10px;
      color: white;
      border-radius: 8px;
      border: 1px solid #efefef;
      background: rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 4px 1px rgb(247, 231, 217);

      .container {
        width: 100%;
        height: 100%;
        padding: 6px 1px 5px 1px;
        display: flex;
        justify-content: center;
        align-items: center;

        .roomId {
          width: 26px;
          height: 26px;
          line-height: 26px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -13px;
          margin-top: -38px;
          text-align: center;
          font-family: 'number-font';
          z-index: 999;
          font-size: 10px;
          font-style: normal;
        }

        .state {
          width: 100%;
          height: 20px;
          line-height: 20px;
          position: absolute;
          left: 0;
          bottom: 5px;
          color: rgb(0, 244, 0);
          z-index: 99;
          text-align: center;
          font-size: 13px;
        }

        .joinRoom {
          width: 70px;
          height: 20px;
          text-align: center;
          border-radius: 8px;
          font-size: 12px;
          cursor: pointer;
          position: absolute;
          z-index: 99;
          color: #feeae9;
          border: 1px solid #fac48e;
          background-color: #fcca926b;
        }

        .user {
          height: 100%;
          display: flex;
          flex: 1;
          position: relative;

          .icon {
            width: 80px;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              border-radius: 50%;
              width: 40px;
              height: 40px;
              z-index: 1;
              border: 1px solid #eee;
            }

            div {
              width: 60px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              font-size: 12px;
            }

          }

          .detail {
            width: 100%;
            height: 40px;

            .userId {
              height: 20px;
              line-height: 20px;

              div {
                font-size: 12px;
                text-align: left;
                // 标题
                span:nth-child(1) {
                  width: 37px;
                  display: inline-block;
                  color: rgb(230, 230, 0);
                }

                // 内容
                span:nth-child(2) {
                  color: rgb(0, 244, 0);
                  width: 37px;
                  display: inline-block;
                }
              }
            }

            .score {
              height: 20px;
              line-height: 20px;
              font-size: 12px;

              div {
                text-align: left;

                span:nth-child(1) {
                  color: rgb(230, 230, 0);
                  width: 37px;
                  display: inline-block;
                }

                span:nth-child(2) {
                  color: rgb(0, 244, 0);
                  width: 37px;
                  display: inline-block;
                }
              }
            }

            .ready {
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              display: flex;

              .status {
                text-align: left;
                flex: 1;

                span {
                  color: rgb(0, 244, 0);
                  width: 37px;
                  display: inline-block;
                }
              }

              .start {
                width: 32px;
                height: 18px;
                line-height: 16px;
                text-align: center;
                box-sizing: border-box;
                border-radius: 8px;
                font-size: 10px;
                cursor: pointer;
                font-weight: bold;
                display: inline-block;
                color: #feeae9;
                border: 1px solid #fac48e;
                background-color: #fcca926b;
                flex: 1;
              }
            }
          }
        }

        .enemy {
          height: 100%;
          display: flex;
          flex: 1;
          position: relative;

          .icon {
            width: 60px;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              border-radius: 50%;
              width: 40px;
              height: 40px;
              z-index: 1;
              border: 1px solid #eee;
            }

            div {
              width: 60px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              font-size: 12px;
            }

          }

          .detail {
            width: 100%;
            height: 40px;

            .userId {
              width: 100%;
              height: 20px;
              line-height: 20px;
              text-align: right;

              div {
                font-size: 12px;

                // 标题
                span:nth-child(1) {
                  color: rgb(230, 230, 0);
                  width: 41px;
                  display: inline-block;
                }

                // 内容
                span:nth-child(2) {
                  color: rgb(0, 244, 0);
                  width: 33px;
                  display: inline-block;
                }
              }
            }

            .score {
              height: 20px;
              line-height: 20px;
              font-size: 12px;

              div {
                text-align: right;

                span:nth-child(1) {
                  color: rgb(230, 230, 0);
                  width: 41px;
                  display: inline-block;
                }

                span:nth-child(2) {
                  color: rgb(0, 244, 0);
                  width: 33px;
                  display: inline-block;
                }
              }
            }

            .ready {
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              display: flex;
              width: 100%;

              .status {
                text-align: right;
                flex: 1;

                span {
                  color: rgb(0, 244, 0);
                  width: 37px;
                  display: inline-block;
                }
              }

              .start {
                width: 32px;
                height: 18px;
                line-height: 16px;
                text-align: center;
                box-sizing: border-box;
                border-radius: 8px;
                font-size: 10px;
                cursor: pointer;
                font-weight: bold;
                display: inline-block;
                flex: 1;
                color: #feeae9;
                border: 1px solid #fac48e;
                background-color: #fcca926b;
              }
            }
          }
        }
      }
    }

    .floor {
      width: 300px;
      margin-top: 25px;

      button {
        width: 100%;
        height: 46px;
        font-size: 15px;
      }
    }
  }
}
